<template>
  <div class="start-read-pass">
    <Form :model="form" :label-width="78">
      <Row>
        <Col span="24" style="border:none;">
          <Form-item :label="$t('module.launchApp.selectedUser')">
            <div v-if="selectedUser.length > 0">
              <ul v-for="item in selectedUser" :key="item.id">
                <li class="selected-user">
                  {{item.userName}}
                  <span class="delete-icon" @click="deleteUser(item)">
                    <Icon type="md-close" />
                  </span>
                </li>
              </ul>
            </div>
            <span v-else style="padding-left: 7px; color: #ff6f4b;">
              {{$t('module.launchApp.noSelectedUser')}}
            </span>
          </Form-item>
        </Col>
      </Row>

      <Row>
        <Col span="24" style="border: none;">
          <Form-item :label="$t('module.launchApp.searchUser')">
            <Input
              :placeholder="$t('module.launchApp.searchPlaceholder')"
              v-model.trim="form.search"
              
              type="text"
              @on-change="search"
            />
            <div v-if="userList.length > 0">
              <ul v-for="item in userList" :key="item.id">
                <li @click="selectUser(item)">{{item.userName}}</li>
              </ul>
            </div>
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
import { getUserList, startReadPassMore } from '@api/flowable/readPass.js'

export default {
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: {
        search: ''
      },
      actions: [
        {
          text: this.$t('module.launchApp.send'),
          theme: 'primary',
          handle: () => this.sendToUser(),
          loading: false
        },
        {
          text: this.$t('common.close'),
          theme: 'primary',
          handle: () => this.$emit('Close')
        }
      ],
      userList: [],
      selectedUser: []
    }
  },
  created() {
    this.$emit('SetTitle', this.$t('module.launchApp.startReadPass'))
    this.$emit('SetPageActions', this.actions)
  },
  methods: {
    search() {
      getUserList({
        pageSize: 100,
        pageNum: 1,
        condition: { userName: this.form.search || '' }
      }).then(res => {
        this.userList = []
        this.userList = res.data.records
      }).catch(err => {})
    },
    selectUser(user) {
      if (!this.selectedUser.length) {
        this.selectedUser.push(user)
      } else {
        let isExist = 0
        this.selectedUser.forEach(item => {
          if (item.id === user.id) {
            isExist = 1
          }
        })
        if (!isExist) {
          // 已选数组中不存在就添加进去
          this.selectedUser.push(user)
        } else {
          // 已选数组中已存在则删除
          this.selectedUser = this.selectedUser.filter(item => item.id !== user.id)
        }
      }
    },
    sendToUser() {
      if (!this.selectedUser.length) return this.$Message.warning(this.$t('module.launchApp.startReadPassWarning'))
      startReadPassMore({
        taskId: this.info.taskId,
        toUsers: this.selectedUser.map(item => item.id)
      }).then(res => {
        this.$Message.success(this.$t('module.launchApp.sendSuccess'))
        this.form.search = ''
        this.selectedUser = []
        this.$emit('Close')
      }).catch(err => this.$Message.warning(this.$t('module.launchApp.sendFail')))
    },
    deleteUser(user) {
      this.selectedUser = this.selectedUser.filter(item => item.id !== user.id)
    }
  }
}
</script>

<style lang="less">
.start-read-pass {
  li {
    list-style-type: none;
    position: relative;
    padding: 1px 7px;
    
    &:hover {
      background: #e5e5e5;
    }
  }
  .delete-icon {
    width: 34px;
    height: 34px;
    font-size: 20px;
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
    cursor: pointer;
    &:hover {
      background: #ff6f4b;
      color: #fff;
    }
  }
}
</style>
